<template>
  <div class="all-type-page">
    <van-nav-bar :title="`发布${jobCategoryObj[$route.query.id]}招聘`" left-arrow @click-left="handleLeavePage" />
 
    <van-notice-bar
      mode="link"
      left-icon="volume-o"
      wrapable
      :scrollable="false"
      v-if="allUserInfo.certification_state === 2 && allUserInfo.company_certification_state === 2"
    >
      {{ '恭喜您，个人认证和企业认证均已通过。请发布招聘吧！' }}
    </van-notice-bar>
 
    <div v-else>
      <van-notice-bar
        mode="link"
        left-icon="volume-o"
        wrapable
        :scrollable="false"
        @click="$router.push('/personalAuth')"
        v-show="allUserInfo.certification_state != 2"
      >
        {{
          '发布招聘信息，必须先个人认证和企业认证。您的个人状态为：' +
            auditState[allUserInfo.certification_state] +
            '。点我去查看。'
        }}
      </van-notice-bar>
      <van-notice-bar
        mode="link"
        left-icon="volume-o"
        wrapable
        :scrollable="false"
        @click="$router.push('/enterpriseAuth')"
        v-show="allUserInfo.certification_state === 2"
      >
        {{
          '恭喜您，个人认证已通过。您的企业状态为：' +
            auditState[allUserInfo.company_certification_state] +
            '。点我去查看。'
        }}
      </van-notice-bar>
    </div>
 
    <com-all-type-jobs
      :jobType="0"
      :btnShow="true"
      :jobTypeId="$route.query.id"
      @getJobContent="toPublishJob"
      :jobDetailInfo="jobDetailVal"
      :keyword="'publishJob'"
    ></com-all-type-jobs>
 
    <van-popup
      v-model="resultPopupShow"
      position="bottom"
      :close-on-click-overlay="false"
      :overlay-style="{background: '#fff'}"
      :style="{height: '35%'}"
    >
      <div class="result-popup">
        <div class="tips">
          {{ jobCategoryObj[$route.query.id] }}招聘信息提交成功，可前往我的公司，我的发布查看审核状态和设置转发权限。
        </div>
        <div class="btns">
          <van-button class="btn" :to="{name: 'MyPublish'}">
            前往我的发布
          </van-button>
          <van-button class="btn" @click="onReloadClick"> 继续发布{{ jobCategoryObj[$route.query.id] }}招聘信息 </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>
 
<script>
import {Toast, Dialog} from 'vant'
import {mapGetters} from 'vuex'
import comAllTypeJobs from '../../components/comAllTypeJobs'
import auditState from '../../constants/auditState'
import jobCategoryObj from '../../constants/jobCategoryObj'
 
export default {
  name: 'allTypeJobs',
  data() {
    return {
      auditState,
      jobTypeId: '',
      jobCategoryObj,
      jobDetailVal: {},
      resultPopupShow: false // 发布成功结果弹出层
    }
  },
 
 
  created() {
    if (this.$route.query.id) {
      this.jobTypeId = this.$route.query.id
    } else {
      this.$router.push('/')
    };
  },
 
  mounted() {
    if (window.history && window.history.pushState) {//监听浏览器返回事件
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
    }
    const val = localStorage.getItem(`draft_publishJob_${this.jobTypeId}`)
    if (val) {
      this.jobDetailVal = JSON.parse(val)
    }
  },
 
  computed: {
    ...mapGetters(['allUserInfo'])
  },
    
    destroyed(){
        window.removeEventListener('popstate', this.goBack, false);
    },

  methods: {
      goBack(){
        localStorage.removeItem(`draft_publishJob_${this.jobTypeId}`);
        this.$router.replace({path: '/'});
        //replace替换原路由，作用是避免回退死循环
      },
    handleLeavePage(){
      // todo 发送请求保存到数据库
      const draftObj = localStorage.getItem(`draft_publishJob_${this.jobTypeId}`);
 
      Dialog.confirm({
        message: '保存此次编辑？',
        confirmButtonText: '保存',
        cancelButtonText: '不保存',
      })
        .then(() => {
            console.log('111')
          this.$router.push('/');
        })
        .catch(() => {
            console.log('22')
          // 不报存 则不发送请求保存到数据库
          localStorage.removeItem(`draft_publishJob_${this.jobTypeId}`);
          this.$router.push('/');
        });
    },
 
    async toPublishJob(value) {
      // 上传图片校验
      /*if(this.countImageNum(value.photo) == 0) {
        Toast("请先上传图片！")
        return
      }*/
      let _self = this
      const res = await this.$api.job.reqPublishJob(value);
      if (res?.code === 200) {
        _self.$router.back()
        // this.resultPopupShow = true
      } else {
        Toast('发布失败！')
      }
    },
 
    /** 继续发布，重新加载当前页面 */
    onReloadClick() {
      location.reload()
    },
 
    countImageNum(photos_list_url) {
      if(!photos_list_url || photos_list_url.length == 0) {
        return 0
      }
      let count = 0;
      for(let img of photos_list_url) {
        if(img) {
          count++;
        }
      }
      return count
    }
  },
 
  components: {
    comAllTypeJobs
  },
}
</script>
 
<style lang="css" scoped>
.all-type-page {
  width: 100%;
  min-height: 100vh;
}
 
.result-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
 
.result-popup .tips {
  padding: 16px;
  background-color: #ecf9ff;
  color: #34495e;
  font-size: 15px;
  line-height: 0.65rem;
  height: 2.5rem;
}
 
.result-popup .btns {
  display: flex;
}
.result-popup .btn {
  flex: 1;
  background: #00bfff;
  color: #fff;
  height: 0.95rem;
  margin-top: 0.6rem;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
 
.result-popup .btn + .btn {
  margin-left: 0.6rem;
}
</style>
